<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/carousel.css">
</head>
<body>
    <div class="carousel-chart">
        <!-- 图片区域 -->
        <ul></ul>
        <!-- 左右按钮区域 -->
        <div class="btn">
            <span>&lt;</span>
            <span>&gt;</span>
        </div>
        <!-- 小圆圈区域 -->
        <ol></ol>
    </div>
    <script src="../js/tools.js"></script>
    <script>
        let ul=$('ul'),ol=$("ol"),pre=$(".btn").children[0],next=$(".btn").children[1];
        
        let arrPic=['img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg']
        
        function createPic(){
            for(i=0;i<arrPic.length;i++){
                let li=document.createElement('li')
                li.innerHTML=`<img src='${arrPic[i]}'>`
                ul.appendChild(li)
            }
            ul.children[0].classList.add('opacity')
        }
        createPic()

        function createCircle(){
            for(let i=0;i<arrPic.length;i++){
                let li=document.createElement('li')
                li.innerHTML=i+1;
                ol.appendChild(li);
            }
            ol.children[0].classList.add('active')
        }
        createCircle()

        function switchPic(){
            for(let i=0;i<ol.children.length;i++){
                ol.children[i].onclick=function(){
                    exclusion()
                    index=i
                    this.classList.add('active')
                    ul.children[i].classList.add('opacity')  
                }
            }
        }
        switchPic()

        index=0;
        next.onclick=function(){
            index++
            if(index===arrPic.length){
                index=0
            }
            exclusion()
            ol.children[index].classList.add('active')
            ul.children[index].classList.add('opacity')  
        }
        pre.onclick=function(){
            
            if(index===0){
                index=arrPic.length
            }
            index--
            exclusion()
            ol.children[index].classList.add('active')
            ul.children[index].classList.add('opacity')  
        }



        //排他
        function exclusion(){
            for(let j=0;j<ol.children.length;j++){
                       ul.children[j].classList.remove('opacity')
                       ol.children[j].classList.remove('active')
                    }

        }
    </script>
</body>
</html>